import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:spree/utils/utils.dart';
import 'package:spree/widgets/box-shadow.dart';

import '../../../widgets/vip_content_box.dart';

class FormsPage extends StatefulWidget {
  FormsPage({Key? key}) : super(key: key);

  @override
  State<FormsPage> createState() => _FormsPageState();
}

class _FormsPageState extends State<FormsPage> {
  @override
  Widget build(BuildContext context) {
    return BoxShadowContainer(
      padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'PROFIT TODAY',
            style: TextStyle(
                color: Color(0xFFFFED4A),
                fontSize: 16,
                fontWeight: FontWeight.w800),
          ),
          _cardContainer(
            margin: EdgeInsets.only(top: 20),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(right: 20, top: 20),
                      child: SizedBox(
                        width: 60,
                        height: 60,
                        child: CircularProgressIndicator(
                          strokeWidth: 12,
                          backgroundColor: Color(0xFFEFDF4A),
                          valueColor: AlwaysStoppedAnimation(Color(0xFFFF6C6C)),
                          value: .5,
                        ),
                      ),
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Container(
                              margin: EdgeInsets.only(right: 12),
                              width: 12,
                              height: 12,
                              color: Color(0xFFEFDF4A),
                            ),
                            Text(
                              'Invitation Bonus',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 12),
                            )
                          ],
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: 12),
                          child: Row(
                            children: [
                              Container(
                                margin: EdgeInsets.only(right: 12),
                                width: 12,
                                height: 12,
                                color: Color(0xFFFF6C6C),
                              ),
                              Text(
                                'Betting Commission',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 12),
                              )
                            ],
                          ),
                        ),
                      ],
                    )
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(top: 20),
                  child: Text(
                    'R\$ 0',
                    style: TextStyle(
                        color: Color(0xFFEFDF4A),
                        fontWeight: FontWeight.w800,
                        fontSize: 24),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 8),
                  child: Text(
                    'Profit Today',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
          ),
          VipContentBox(
            margin: EdgeInsets.only(top: 20),
            padding: EdgeInsets.only(top: 0),
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Color(0xFF4928A5),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8),
                      topRight: Radius.circular(8),
                    ),
                  ),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Column(
                            children: [
                              Text(
                                'Betting Commission',
                                style: TextStyle(
                                    color: Color(0xFFFFED4A), fontSize: 10),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 4),
                                child: Text(
                                  '0',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 10),
                                ),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Text(
                                'Invitation Bonus',
                                style: TextStyle(
                                    color: Color(0xFFFFED4A), fontSize: 10),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 4),
                                child: Text(
                                  '0',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 10),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(20),
                  child: Text(
                    'Your profit will consist of three components namely [Invitation Bonus][Betting Commission]',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Container(
                  padding: EdgeInsets.fromLTRB(20, 0, 20, 20),
                  child: Text(
                    '.Betting Commission: This will be your main income and you will receive a different percentage of each bet you invite players to make as a commission.',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Container(
                  padding: EdgeInsets.fromLTRB(20, 0, 20, 20),
                  child: Text(
                    'Invite Bonus: The user you invite to deposit for the first time will receive a cash bonus of R\$8',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 20, bottom: 20),
            child: Text(
              'TOTAL PROFIT',
              style: TextStyle(
                  color: Color(0xFFFFED4A),
                  fontSize: 16,
                  fontWeight: FontWeight.w800),
            ),
          ),
          _cardContainer(
            width: Utils().getScreenWidth(context),
            child: Column(
              children: [
                Image.asset(
                  'images/treasure-box.png',
                  width: 100,
                ),
                Text(
                  'R\$ 0',
                  style: TextStyle(
                      color: Color(0xFFEFDF4A),
                      fontWeight: FontWeight.w800,
                      fontSize: 24),
                ),
                Container(
                  margin: EdgeInsets.only(top: 4),
                  child: Text(
                    'Total Profit',
                    style: TextStyle(color: Colors.white, fontSize: 12),
                  ),
                )
              ],
            ),
          ),
          VipContentBox(
            margin: EdgeInsets.only(top: 20),
            padding: EdgeInsets.only(top: 0),
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Color(0xFF4928A5),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8),
                      topRight: Radius.circular(8),
                    ),
                  ),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  'Betting Commission',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Color(0xFFFFED4A), fontSize: 10),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 4),
                                  child: Text(
                                    '0',
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 10),
                                  ),
                                ),
                              ],
                            ),
                            flex: 1,
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  'Achievement Bonus',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Color(0xFFFFED4A), fontSize: 10),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 4),
                                  child: Text(
                                    '0',
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 10),
                                  ),
                                ),
                              ],
                            ),
                            flex: 1,
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  'Invitation Bonus',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Color(0xFFFFED4A), fontSize: 10),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 4),
                                  child: Text(
                                    '0',
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 10),
                                  ),
                                ),
                              ],
                            ),
                            flex: 1,
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  'Deposited Users',
                                  style: TextStyle(
                                      color: Color(0xFFFFED4A), fontSize: 10),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 4),
                                  child: Text(
                                    '0',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 10),
                                  ),
                                ),
                              ],
                            ),
                            flex: 1,
                          )
                        ],
                      ),
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(20),
                  child: Text(
                    "You receive a commission for every bet you invite users to make, win or lose.So all you have to do is improve your gaming skills, think about how to win the game and share it with everyone to help more people win with your method.We want all players to have fun at Betfiery, whether it's the fun of winning bets or the game itself!",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _cardContainer(
      {EdgeInsets? margin, double? width, double? height, Widget? child}) {
    return Container(
        padding: EdgeInsets.all(10),
        margin: margin,
        width: width,
        height: height,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(8.0)),
          gradient: LinearGradient(
            colors: [Color(0xFF281B73), Color(0xFF8458FF)],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: child);
  }
}
